<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/css/home.css">
  <script src="/js/jquery-3.4.1.min.js"></script>
  <script src="/js/ejs.js"></script>
</head>

<body>
  <main>
    <div>

      <ul>

      </ul>
      <div>
        <span class="left">上</span>
        <dl>
          <dd class="action">1</dd>
          <dd>2</dd>
          <dd>3</dd>
          <dd>4</dd>
          <dd>5</dd>
        </dl>
        <span class="right">下</span>
      </div>
    </div>

  </main>
  <script type="text/html" id="box">
      <% for(var i = 0; i < 10;i++){ %>
      <li>
        <img src="<%= data[i].img_url %>" alt="">
        <div>
          <h2><a href="/html/xiangqing.html?id=<%= data[i].id %>"><%= data[i].title %></a></h2>
          <div>
            <span><%= data[i].author %></span>
            <span><%= data[i].podcast %></span>
            <span><%= data[i].duration %></span>
            <span><%= data[i].play_time %></span>
          </div>
          <!-- <section><%= data[i].content %></section> -->
        </div>
      </li>
      <% } %>
  </script>
  <script>


    function getText(a) {
      $.get("/php/home.php", {id:a}, function (res) {
        var data = JSON.parse(res);
        var text = $("#box").html();
        var html = ejs.render(text, { data: data });
        $("ul").html(html);
      })
    }
    var d = 1;
    getText(d);
    $("dd").click(function () {
      d = $(this).html();
      getText(d);
      // 1 2 3 4 5     3 4 5 6 7 
      // 98 99 100 101 102
      fenye(d)
    })

    function fenye(num){
      if (num < 3 || num > 100) {
        // $(that).addClass("action").siblings().removeClass("action");

        if(num  <  3){
          $(`dd:eq(${num - 1})`).addClass("action").siblings().removeClass("action");
        }else{
          $(`dd:eq(${num - 98})`).addClass("action").siblings().removeClass("action");
        }

      } else {
        $("dd").eq(2).addClass("action").siblings().removeClass("action");
        for (var n = num - 2, m = 0; n < num + 2; n++ , m++) {
          $("dd").eq(m).html(n);
        }
      }
    }

    $(".left").click(function () {
      d--;
      if (d < 1) {
        d = 1;
      }
      getText(d);
      fenye(d);
    })
    $(".right").click(function(){
      d++;
      if(d > 102){
        d = 102;
      }
      getText(d);
      fenye(d);
    })

    // $("ul").on("click","li",function(){
    //   location.href = "/html/xiangqing.html?id=?"
    // })

  </script>
</body>

</html>